<template>
  <div>
    <div>
      <!-- 搜索部分 -->
      <el-input
        clearable
        v-model.trim="configReq.targetAdminId"
        @keyup.enter="getInfo"
        style="width: 200px; margin-right: 15px"
        placeholder="请输入管理ID"
      />
      <el-button type="primary" :icon="Search" @click="getInfo">查找</el-button>
    </div>
    <div style="margin-top: 20px">
      <!-- 列表 -->
      <el-table :data="infoList" border>
        <el-table-column prop="id" label="日志ID" width="180" />
        <el-table-column prop="adminId" label="管理员ID" width="180" />
        <el-table-column prop="requestId" label="请求ID" />
        <el-table-column prop="group" label="API分组" />
        <el-table-column prop="method" label="请求ID" />
        <el-table-column label="操作时间">
          <template #default="scope">
            {{ new Date(scope.row.gmtCreate).computeDate() }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0px">
      <!-- 分页组件 -->
      <ElPagination
        :total="pageInfo.total"
        :limit="pageInfo.limit"
        @changeReq="changeConfig"
      ></ElPagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { post } from "@/request/http";
import { Search } from "@element-plus/icons-vue";

// 节点
const backtop = ref();
// 请求数据
let configReq = reactive({
  _gp: "admin.log",
  _mt: "list",
  targetAdminId: "", //管理员id
  page: 1,
  limit: 20,
});
// 表格数据
let infoList = ref([]);
// 传递给分页组建的数据
let pageInfo = reactive({
  total: 0,
  limit: 20,
});

onMounted(() => {
  getInfo();
});
// 获取表格数据
const getInfo = (): void => {
  post(configReq)
    .then((res) => {
      if (200 == res.errno) {
        //成功状态码
        // console.log(res);
        pageInfo.total = res.data.total; //获取总条数
        infoList.value = res.data.items; //获取表格信息
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

// 分页组件改变时触发的函数
const changeConfig = (e: { page: number; limit: number }): void => {
  Object.assign(configReq, e);
  // console.log(e);
  getInfo();
};
</script>
<style scoped lang="less"></style>
